<template>
    <div class="background">
        <div class="logo">
            <img src="../../assets/img/logo.png" alt="">
        </div>
        <div class="loginBox">
            <h1>注册账号</h1>
            <div class="loginForm">
                <el-form :model="registerForm" style="width: 250px">
                    <el-form-item>
                        <el-input v-model="registerForm.username" placeholder="请输入用户名" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="registerForm.name" placeholder="请输入姓名" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="registerForm.password" placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item>
                        <el-button class="loginBtn" type="primary" @click="onRegister">注册</el-button>
                    </el-form-item>
                    <div class="tip">
                        <span @click="goToLogin">已有账号？立即登录</span>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="footer">
            <p>反馈建议 | 官方空间 | 空间活动 | 空间应用 | 腾讯原创馆 | QQ互联 | QQ登录 | 应用侵权投诉 | Complaint Guidelines</p>
            <p>Copyright © 2005 - 2025 Tencent.All Rights Reserved.</p>
            <p>腾讯公司 版权所有 粤网文[2014]0633-233号</p>
        </div>
    </div>
</template>

<script setup>
import api from '../../api/index'
import { reactive } from 'vue'
import { useRouter } from 'vue-router';

const registerForm = reactive({
    username: '',
    name: '',
    password: ''
})

const router = useRouter()

// 注册
const onRegister = async () => {
    // 判断字段是否为空
    if (!registerForm.username || !registerForm.name || !registerForm.password) {
        ElMessage.error('请填写完整信息')
        return
    }
    const res = await api.register(registerForm);
    if (res.code === 200) {
        ElMessage.success('注册成功')
        router.push('/login') // 假设你的登录路由是 '/login'
    } else {
        ElMessage.error(res.message || '注册失败')
    }
}

// 跳转到登录页
const goToLogin = () => {
    router.push('/login')
}
</script>

<style lang="less" scoped>
.background {
    background: url(../../assets/img/background.webp) no-repeat;
    // 设置背景图片大小
    background-size: cover;
    height: 100vh;
    background-position: 0 -150px;
    overflow: hidden;

    .logo {
        position: absolute;
        top: 10vh;
        left: 25vw;

        img {
            width: 250px;
        }
    }

    .loginBox {
        background-color: white;
        width: 400px;
        height: 350px;
        /* Slightly taller to accommodate extra field */
        margin-left: 50vw;
        margin-top: 20vh;
        overflow: hidden;

        h1 {
            text-align: center;
            font-size: 20px;
            margin: 30px 0;
        }

        .loginForm {
            margin-left: 75px;

            .loginBtn {
                width: 100%;
            }

            .tip {
                font-size: 14px;
                display: flex;
                justify-content: center;
                cursor: pointer;
                color: #409EFF;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .footer {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        text-align: center;
        color: white;

        p {
            margin: 5px 0;
        }
    }
}
</style>